<template>
	<view class="itemBox" :class="type == 2 ? '' : ''">
		<template>
			<UserByList @userPage="$emit('userPage',item)" :item="item" :type="type"
				@communicates="$emit('communicates',item)"></UserByList>
		</template>

		<view class="toppingByList" v-if="item.is_topping == '2'">
			<u-icon name="arrow-upward"></u-icon>
		</view>

		<slot name="orderStatus"></slot>
		<slot name="list"></slot>

		<!-- 有车求货 -->
		<Ycqh v-if="item.release_type === '1'" :type="type" :item="item" :isOrder="isOrder"></Ycqh>

		<!-- 有货求车 -->
		<Yhqc v-if="item.release_type === '2'" :type="type" :item="item" :isOrder="isOrder"></Yhqc>

		<!-- 货源信息 -->
		<Hyxx v-if="item.release_type === '3' && ( item.human_type === '1' || item.human_type === '2')" :type="type"
			:item="item" :isOrder="isOrder"></Hyxx>

		<slot name="flag"></slot>

		<view class="bidding_address">
			<!-- <view class="bidding_ares">
				<view class="bidding_time">
					<text style="line-height: 50rpx;">{{ time("S", item.createtime) }}</text>
				</view>
			</view> -->
			<view class="bidding_ares">

				<!--运输 小件快递  货源信息 没有运输方式的显示 -->
				<!-- <block  v-if="item.release_type === '3' && ( item.human_type === '1')">
					<view style="width: 70%;">
					</view>
				</block>
				<block v-else>
					<view style="width: 70%;">
						<TransportType :item="item"></TransportType>
					</view>
				</block> -->

				<view style="width: 70%;">
					<TransportType :item="item"></TransportType>
				</view>


				<slot name="btns" v-if="isRow==0"></slot>

				<view class="bidding_btn" style="margin-top: 25rpx;" @click.stop="$emit('communicate',item)"
					v-if="!isOrder">
					<text class="btnStyle">
						{{ type == 1 ? $t('即时沟通') : $t(jb) }}
					</text>
				</view>
			</view>

		</view>
		<block v-if="(identity_type === 3 || identity_type === 0) && status == '0'">
			<view class="purchase_wrap">
				<view class="pur_left">
					<view class="item_top">
						<text class="name">{{$t('浏览')}}:</text>
						<text class="value">{{item.view_count || 0}}</text>
					</view>
					<view class="item_top item_bottom">
						<text class="name">{{$t('推送')}}:</text>
						<text class="value">{{item.push_count || 0}} {{$t('家运输公司')}}</text>
					</view>
				</view>
				<view class="pur_right">
					<view class="text">
						<text class="name">{{$t('竞标')}}:</text>
						<text class="value">{{item.jb_count || 0}}{{$t('家')}}</text>
					</view>
				</view>
			</view>
		</block>
		<slot name="btns" v-if="isRow==1"></slot>
		<slot name="bottom"></slot>

	</view>
</template>

<script>
	import UserByList from '@/components/UserByList.vue'
	import Ycqh from '@/components/detail/TransportListItem/Ycqh.vue'
	import Yhqc from '@/components/detail/TransportListItem/Yhqc.vue'
	import Hyxx from '@/components/detail/TransportListItem/Hyxx.vue'
	import TransportType from '@/components/TransportType.vue'

	export default {
		components: {
			TransportType,
			Ycqh,
			Yhqc,
			Hyxx,
			UserByList
		},
		props: {
			item: {
				type: Object,
				default: {},
			},
			type: {
				type: [String, Number],
				default: '1',
			},
			isRow: {
				type: String | Number,
				default: '0',
			},
			isOrder: {
				type: [Number, Boolean],
				default: false,
			},
			orderDetail: {
				type: [Array, Object, null],
				default: () => ({}),
			},
			identity_type: {
				type: String | Number,
				default: '',
			},
			status: {
				type: String | Number,
				default: 0,
			},
		},
		mounted() {
			if (uni.getStorageSync('off') == false) {
				this.jb = '参与订单'
			} else {
				this.jb = '参与竞标'
			}
		},
		data() {
			return {
				jb: '参与订单'
			};
		},
		methods: {
			time(type = "MS", date1, str = "year") {
				if (type === "S") date1 = date1 * 1000 //秒
				let year = new Date(date1).getFullYear();
				let month = (new Date(date1).getMonth() + 1) > 9 ? (new Date(date1).getMonth() + 1) : '0' + (new Date(
						date1)
					.getMonth() + 1);
				let date = new Date(date1).getDate() > 9 ? new Date(date1).getDate() : '0' + new Date(date1).getDate();
				let hours = new Date(date1).getHours() > 9 ? new Date(date1).getHours() : '0' + new Date(date1).getHours();
				let minutes = new Date(date1).getMinutes() > 9 ? new Date(date1).getMinutes() : '0' + new Date(date1)
					.getMinutes();
				let seconds = new Date(date1).getSeconds() > 9 ? new Date(date1).getSeconds() : '0' + new Date(date1)
					.getSeconds();
				if (str === "year") {
					// return `${year}` + app.$i18n.t('年') + `${month}` + app.$i18n.t('月') + `${date}` + app.$i18n.t('日') + `${hours}:${minutes}:${seconds}`
					return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`
				}
				if (str === "date") {
					return `${year + `-` + month + `-` + date}`
				}
				return `${year + str + month + str + date} ${hours}:${minutes}:${seconds}`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.itemBox {
		background: #ddd;
		padding: 10px;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;

		// 2024/11/15 新增
		.purchase_wrap {
			display: flex;
			width: 100%;
			margin-top: 24rpx;
			align-items: stretch;
			margin-bottom: 20rpx;

			.pur_left {
				flex: 1;
				margin-right: 15rpx;
				display: inline-flex;
				flex-direction: column;
				justify-content: space-between;

				.item_top {
					min-height: 40rpx;
					line-height: 40rpx;
					border-radius: 10rpx;
					text-align: center;
					color: #fff;
					background-image: linear-gradient(270deg, #CCE7F9 0%, #5282E6 33%, #CCE7F9 66%, #5282E6 100%);
					background-position: 100%;
					animation: btnone 4s linear infinite;
					background-size: 300% 100%;
					margin-bottom: 10rpx;

					&.item_bottom {
						margin-bottom: 0;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						animation: btnone 4.5s linear infinite;

						.value {
							line-height: 1.1;
						}
					}
				}

				.name {
					font-size: 16rpx;
					margin-right: 5rpx;
				}

				.value {
					font-size: 22rpx;
					font-weight: bold;
				}
			}

			.pur_right {
				flex: 1;
				min-height: 90rpx;
				border-radius: 12rpx;
				background: #F6F7FB;
				display: inline-flex;
				align-items: center;
				justify-content: center;

				.text {
					// background: linear-gradient(180deg, #30F998 0%, #0D7DE2 98%);
					// -webkit-background-clip: text;
					// -webkit-text-fill-color: transparent;
					// background-clip: text;
					// text-fill-color: transparent;
					color: #3484C3;

					.name {
						font-size: 24rpx;
						margin-right: 5rpx;
					}

					.value {
						font-size: 30rpx;
					}
				}
			}

		}

		&.yellow {
			background: #fefcf6;
		}

		.bidding_betwn {
			display: flex;
			// justify-content: space-between;
			align-items: center;

			.chat {
				transform: translateY(0rpx);
			}

			.userName {
				height: 50rpx;

				.bidding_user_text {
					display: block;
					padding-left: 0;
				}

				.country_icon {
					padding-left: 0;
				}
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}


			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				// padding: $my-padding-20;
				margin-right: 10rpx;

				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}
			}
		}

		.price {
			text-align: right;
			position: relative;
			margin-top: 20rpx;

			.text {
				text-align: left;
				width: 150rpx;
				color: #fff;
				position: absolute;
				right: 20rpx;
				font-size: 40rpx;
				top: 50%;
				z-index: 2;
				transform: translateY(-50%);

				.small {
					font-weight: 600;
					font-size: 25rpx;
				}
			}

			img {
				height: 100rpx;
				width: 234rpx;
				transform: translateX(40rpx);
			}
		}

		.lineP {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			img {
				width: 40rpx;
				height: 40rpx;
			}

			.label {
				margin: 0 20rpx;
				font-weight: 600;
			}

			.text {
				flex: 0 0 400rpx;
			}
		}

		.title {
			color: #e43b14;
			font-size: 38rpx;
			border-top: 1rpx solid #cccccc;
			font-weight: 600;
			margin-top: 10rpx;
			word-break: break-all;
			min-height: 80rpx;
			margin-bottom: 20rpx;
		}

		//地址信息
		.bidding_address {
			padding: 13.6rpx $my-padding-20 10rpx $my-padding-20;
			margin-top: 10rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: $my-font-size21;
			font-weight: 400;
			color: #888888;
			line-height: 30rpx;

			.bidding_ares {
				flex: 1;
				display: flex;
				//flex-direction: column;
				justify-content: flex-start;

				.bidding_ares1 {
					display: flex;
					justify-content: flex-start;

					image {
						width: 24.42rpx;
						height: 31.4rpx;
					}
				}
			}
		}
	}
</style>